<template>
<div>
	<van-nav-bar title="影院" ref="navbar" @click-left="handleLeft" @click-right="handleRight">
		<template #left>
			{{cityName}}<van-icon name="arrow-down" />
		</template>
	<template #right>
		<van-icon name="search" size="28" color="blank" />
	</template>

</van-nav-bar>


	<div class="box" :style="{
		height: height
	}">
		<ul>
			<li v-for="data in cinemaList" :key="data.cinemaId">
				<div class="left">
					<div class="cinema_name">{{data.name}}</div>
					<div class="cinema_text">{{data.address}}</div>
				</div>

				<div class="right cinema_name">
					<div style="color:orangered;">￥{{data.lowPrice/100}}起</div>
				</div>
			</li>
		</ul>
	</div>
</div>
</template>
<script>
import BetterScroll from 'better-scroll'
import { mapState,mapActions,mapMutations } from 'vuex'

console.log(mapState(['cinemaList']));
export default {
	data(){
		return{
			height: '0px'
		}
	},
	computed:{
		...mapState(['cinemaList','cityId','cityName']) // 类似函数调用
	},
	mounted(){
		//动态计算高度  减去底部和顶部的高度
		this.height = document.documentElement.clientHeight - this.$refs.navbar.$el.offsetHeight - document.querySelector('footer').offsetHeight + 'px'

		// 分发
		if(this.cinemaList.length === 0){
			this.getCinemaData(this.cityId).then(res => {
			// 样回调函数将在 DOM 更新完成后被调用
			this.$nextTick(()=>{
				 // 使用更平滑的滚动
				new BetterScroll('.box', {
					// 滚动条
					scrollbar: {
						fade: true
					}
				})
			})
			})
		}


		// http({
		// 	url:`/gateway?cityId=${this.$store.state.cityId}&ticketFlag=1&k=1167114`,
		// 	headers:{
		// 		'X-Host': 'mall.film-ticket.cinema.list'

		// 	}
		// }).then(res => {
		// 	this.cinemaList = res.data.data.cinemas

		// 	// 样回调函数将在 DOM 更新完成后被调用
		// 	this.$nextTick(()=>{
		// 		 // 使用更平滑的滚动
		// 		new BetterScroll('.box', {
		// 			// 滚动条
		// 			scrollbar: {
		// 				fade: true
		// 			}
		// 		})
		// 	})
		// })
	},
	methods: {
		...mapActions(['getCinemaData']),
		...mapMutations(['clearCinema']),

		handleLeft(){
			this.$router.push('/city')

			// 清空cinemaList缓存
			this.clearCinema()
		},
		handleRight(){
			this.$router.push('/cinemas/search')
		}
	}
}
</script>
<style lang="scss" scoped>
li {
	padding: .9375rem;

	display: flex;
	justify-content: space-between;
	.left {
		width: 13.25rem;

	}
	.cinema_name {
		font-size: 15px;
	}
	.cinema_text{
		color: #797d82;
		font-size: 12px;
		margin-top: 5px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}
.box {
	// 加高度 避免浏览器自带滚动条生效
	// height: 38.625rem;
	overflow: hidden;
	position: relative; // 使滚动条相对定位
}
</style>